/***
Use lists for listing any type of item that isn't a button. If you're only listing buttons you can use the [buttons](?doc=buttons) componenet instead.

To create a list simply include the `@list` @mixin in any list element (`ul`). To style your list include `@list-theme-x`.

<ul>
	<li>Here's</li>
	<li>a normal</li>
	<li>list</li>
</ul>

If you want your list to cover the entire width of the page use `@list-inset`.

<ul>
	<li>This is</li>
	<li>an inset</li>
	<li>list</li>
</ul>
***/
@mixin list {
	margin: 0 0 $margin-bottom;
	padding: 0;

	list-style: none;

	border: 1px solid;
	@include border-radius($border-radius);
	@include box-shadow($default-shadow);

	li {
		padding: $padding-top-bottom $padding-left-right;
		border-bottom: 1px solid;
	}

		li > a:only-child {
			display: block;
			margin: (-$padding-top-bottom) (-$padding-left-right);
			padding: $padding-top-bottom $padding-left-right;

			color: inherit;
			text-decoration: inherit;
		}

	li:first-child {
		border-top: 0;
		@include border-top-right-radius($border-radius);
		@include border-top-left-radius($border-radius);
	}

	li:last-child {
		border-bottom: 0;
		@include border-bottom-right-radius($border-radius);
		@include border-bottom-left-radius($border-radius);
	}
}

@mixin list-inset ($full: true) {
	@if $full {
		@include list;
	}

	@include border-radius(0);
	margin-left: -$wrapper-padding;
	margin-right: -$wrapper-padding;
	border-left: 0;
	border-right: 0;

	li {
		padding: $padding-top-bottom $wrapper-padding;
	}

		li > a:only-child {
			margin: (-$padding-top-bottom) (-$wrapper-padding);
		}

	li:first-child, 
	li:last-child {
		@include border-radius(0);
	}
}

// Themes
@mixin list-theme-a {
	@include theme-a;

	li {
		@include theme-a;
	}

		li > a:only-child {
			@include theme-a(true);
		}
}

@mixin list-theme-b {
	@include theme-b;

	li {
		@include theme-b;
	}

		li > a:only-child {
			@include theme-b(true);
		}
}

@mixin list-theme-c {
	@include theme-c;

	li {
		@include theme-c;
	}

		li > a:only-child {
			@include theme-c(true);
		}
}

@mixin list-theme-d {
	@include theme-d;

	li {
		@include theme-d;
	}

		li > a:only-child {
			@include theme-d(true);
		}
}

@mixin list-theme-e {
	@include theme-e;

	li {
		@include theme-e;
	}

		li > a:only-child {
			@include theme-e(true);
		}
}

@mixin list-theme-f {
	@include theme-f;

	li {
		@include theme-f;
	}

		li > a:only-child {
			@include theme-f(true);
		}
}
